<template>
  <el-select
    ref="xghSelect"
    v-model="localeValue"
    style="width: 100%"
    :filterable="filterable"
    :clearable="clearable"
    @change="selectChange"
    @visible-change="() => handleFilterMethod('')"
    :filter-method="(value) => handleFilterMethod(value)"
  >
    <el-option v-for="item in options" :key="item.id" :label="item[activeKey]" :value="item.id"></el-option>
  </el-select>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import { httpAction } from '../../api/manage'
export default {
  name: 'xghSelect',
  props: {
    value: {
      type: String,
    },
    filterable: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    activeKey: {
      type: String,
      default: 'name'
    },
    reqData: {
      type: Object,
      default: () => {
        return {
          url: '',
          data: {},
        }
      },
    },
    reqType: {
      type: String,
      default: 'get',
    },
  },
  data() {
    return {
      localeValue: '',
      options: [],
      optionsCopy: [],
    }
  },
  watch: {
    value(val) {
      this.localeValue = val
    },
    localeValue(val) {
      this.$emit('input', val)
    },
  },
  created() {
    this.queryData()
    console.log(this,'$vue')
  },
  mounted() {},
  methods: {
    async queryData() {
      
      // const reqObj = {
      //   postAction: () => {
      //     return postAction(this.reqData.url, this.reqData.data || {}).then((res) => {
      //       if (res.code === 200) {
      //         this.options = res.result
      //       } else {
      //         this.$elMessage.error(res.message)
      //       }
      //     })
      //   },
      //   getAction: () => {
      //     return getAction(this.reqData.url, this.reqData.data || {}).then((res) => {
      //       if (res.code === 200) {
      //         this.options = res.result
      //       } else {
      //         this.$elMessage.error(res.message)
      //       }
      //     })
      //   },
      // }
      // reqObj[this.reqType]()
      console.log(this.reqData.data || {});
      const res = await httpAction(this.reqData.url, this.reqData.data || {}, this.reqType)
      if (res.code === 200) {
        this.options = res.result
        this.optionsCopy = JSON.parse(JSON.stringify(this.options))
      } else {
        this.$elMessage.error(res.message)
      }
    },
    handleFilterMethod(value) {
      this.options = this.filterMethod(this.optionsCopy, value)
    },
    selectChange(v) {
      this.localeValue = v
    },
    filterMethod(list1, value, py = 'pinYinCode') {
      let list = list1
      let label = this.activeKey
      if (value && value.length > 0) {
        let tempList = []
        for (let index = 0; index < list.length; index++) {
          const item = list[index]
          let upperCase = value.toUpperCase()
          let itemPy = item[py] || ''
          if (itemPy.length <= 0) {
            itemPy = this.$pinyin.getJp(item[label]) || ''
          }
          if (item[label].indexOf(value) > -1 || itemPy.indexOf(upperCase) > -1) {
            tempList.push(item)
          }
        }
        return tempList
      } else {
        return JSON.parse(JSON.stringify(this.optionsCopy))
      }
    },
  },
}
</script>
<style></style>
